<template>
  <div class="app">
    <div class="login-logo">
    	<div><img src="https://testapp.jzdoctor.com/offlinepay-web/static/img/loginlogo.png"></div>
    	<p>收款记录查询</p>
    </div>
    <div>
    	<div class="login-input">
    		<div class="icon"><span class="iconfont icon-user"></span></div>
    		<div class="input"><input type="tel" name="" placeholder="请输入手机号" v-model="phone"></div>
    	</div>
    	<div class="login-code">
	    	<div class="login-input">
	    		<div class="icon"><span class="iconfont icon-pwd" style="font-size:.91rem"></span></div>
	    		<div class="input"><input type="tel" name="" placeholder="请输入验证码" v-model="code"></div>
	    	</div>
	    	<div class="login-btn" @click="getCode()" :class="[isagin? 'active' : 'off']">{{getcodehtml}}</div>
    	</div>
    </div>
    <div class="login-btn login" @click="getLogin()" :class="[islogin ? 'active' : 'off']" >登录</div>
  </div>
</template>
<script>
  import Vue from 'vue'
  // import Lockr from 'lockr'
  export default {
    name: 'login',
    data () {
      return {
        phone: '',
        code: '',
        islogin: false,
        getcodehtml: '获取验证码',
        isclick: true,
        isagin: true,
        isactive: true,
        time: 59
      }
    },
    mounted: function () {
      this.init()
    },
    watch: {
      phone () {
        if (this.phone.replace(/^\s+|\s+$/g, '').length <= 0) {
          this.islogin = false
        } else {
          this.islogin = true
        }
      }
    },
    methods: {
      init: function () {
        // console.log(this.$router)
        // this.$router.beforeEach((to, from, next) => {
        //   console.log(to, from, next)
        // })
        Vue.prototype.$tools.loading(false)
      },
      getCode: function () {
        let _this = this
        if (!this.check()) {
          return false
        }
        if (this.isclick) {
          this.$EcHttpUtils.postForm('open/validateCode.json', {mobile: _this.phone}).then(function (ret) {
            _this.isclick = false
            if (ret.data.statusCode === 0) {
              // console.log(ret.data)
              let int = setInterval(function () {
                _this.isagin = false
                if (_this.time <= 0) {
                  _this.isclick = true
                  _this.isagin = true
                  clearInterval(int)
                  _this.getcodehtml = '获取验证码'
                  _this.time = 60
                } else {
                  _this.getcodehtml = _this.time + 's后重新获取'
                }
                _this.time--
              }, 1000)
            } else {
              _this.isclick = true
              _this.$layer.toast({
                icon: 'icon-check',
                content: ret.data.message,
                time: 1000
              })
            }
          })
        }
      },
      check: function () {
        if (this.phone.replace(/^\s+|\s+$/g, '').length <= 0) {
          alert('手机号码不能为空')
          return false
        }
        if (!Vue.prototype.$tools.isPhone(this.phone)) {
          alert('手机号码格式不正确')
          return false
        }
        return true
      },
      getLogin: function () {
        let _this = this
        if (!this.isactive) {
          return false
        }
        if (!this.islogin) {
          return false
        }
        if (!this.check()) {
          return false
        }
        if (this.code.replace(/^\s+|\s+$/g, '').length <= 0) {
          alert('验证码不能为空')
          return false
        }
        Vue.prototype.$tools.loading(true)
        this.$EcHttpUtils.postForm('open/login.json', {mobile: _this.phone, vcode: _this.code}).then(function (ret) {
          _this.isactive = false
          Vue.prototype.$tools.loading(false)
          if (ret.data.statusCode === 0) {
            let shopids = {
              // shopIds: ret.data.data,
              mobile: _this.phone
            }
            // Lockr.set('shopids', shopids)
            localStorage.shopids = JSON.stringify(shopids)
            _this.$layer.toast({
              icon: 'icon-check', // 图标clssName 如果为空 toast位置位于下方,否则居中
              content: '登录成功',
              time: 1000 // 自动消失时间 toast类型默认消失时间为2000毫秒
            })
            setTimeout(function () {
              _this.$router.push({name: 'List'})
            }, 1000)
          } else {
            _this.isactive = true
            _this.$layer.toast({
              icon: 'icon-check', // 图标clssName 如果为空 toast位置位于下方,否则居中
              content: ret.data.message,
              time: 1000 // 自动消失时间 toast类型默认消失时间为2000毫秒
            })
          }
        })
      }
    }
  }
</script>

<style scoped>
	.app{background: #fff;height: 100%;}
</style>
